<template>
  <view class="containerDoc">
    <view class="page-container" :style="listHeightStylePage">
      <!-- 导航栏 -->
      <u-navbar title="设置" placeholder @leftClick="back" :border="false" :shadow="true"></u-navbar>
      <view style="padding: 20rpx" :style="listHeightStyle">
        <view>
          <!-- <view style="height: auto;background-color: #fff;border-radius: 20rpx;display: flex;margin-bottom: 30rpx;">
            <up-cell-group :border="false">
              <up-cell  :border="false" title="极速打卡"   label="打开自动打卡，极速完成打卡" value="" isLink @click="FastcheckinClick"></up-cell>
            </up-cell-group>
          </view> -->
          <view style="height: auto;background-color: #fff;border-radius: 20rpx;display: flex;">
            <up-cell-group :border="false">
              <up-cell  :border="false" title="人脸管理" value="" isLink @click="FacerecognitionClick"></up-cell>
            </up-cell-group>
          </view>

        </view>

        <!-- 底部导航栏 -->
        <u-tabbar :value="tabbarIndex" :placeholder="true">
          <u-tabbar-item @click="toClock" text="打卡" icon="map"></u-tabbar-item>
          <u-tabbar-item @click="toStatis" text="统计" icon="file-text"></u-tabbar-item>
          <u-tabbar-item text="设置" icon="setting"></u-tabbar-item>
        </u-tabbar>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      tabbarIndex: 2,
      listHeight: 0, // 动态计算的高度
      listHeightStyle: {}, // 动态计算的样式
      appHeight: null,
      topHeight: 0,
      listHeightStylePage: {},
    }
  },
  created() {
    this.appHeight = uni.getSystemInfoSync();
    this.topHeight = this.appHeight.screenHeight;

    // #ifdef H5
    this.listHeightStylePage = {
      height: `${window.innerHeight}px`,
    };
    // #endif

    // #ifdef APP-PLUS
    this.listHeightStylePage = {
      height: `${this.topHeight}px`,
    };
    // #endif

    this.calculateListHeight();
  },
  methods: {
    calculateListHeight() {
      const windowHeight = window.innerHeight; // 视口高度
      const navbarHeight = 7; // 导航栏高度（假设为 44px）
      const tabsHeight = 88;
      // #ifdef APP-PLUS
      this.listHeightStyle = {
        height: `${this.topHeight - 122}px`,
        overflowY: 'hidden'
      };
      // #endif

      // #ifdef H5
      const listHeight = windowHeight - navbarHeight - tabsHeight;
      this.listHeightStyle = {
        height: `${listHeight}px`,
        overflowY: 'hidden'
      };
      // #endif
    },

    FacerecognitionClick(){
      uni.navigateTo({
        url: '/pages/workspace/components/Facemanagement',
        animationType: 'none'
      })
      console.log('人脸管理')
    },
    FastcheckinClick(){

      uni.navigateTo({
        url: '/pages/workspace/components/Fastcheckin',
        animationType: 'none'
      })
      console.log('极速打卡')
    },

    toClock () {
      uni.navigateTo({
        url: '/pages/workspace/attendance/clockIn',
        animationType: 'none'
      })
    },
    toStatis () {
      uni.navigateTo({
        url: '/pages/workspace/attendance/statis',
        animationType: 'none'
      })
    },
    back(){
      // uni.navigateBack();
     uni.switchTab({
        url: '/pages/workspace/home/index',
        animationType: 'pop-in',
        animationDuration: 200
      })
    }
  },
}
</script>

<style scoped lang="scss">
.containerDoc{
  background-color: #f3f4f5;

  .page-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

}

</style>
